<template>
  <el-dialog
    title="详细信息"
    :visible.sync="isshow"
    width="500px"
    @close="handleClose"
  >
    <div class="msgContent" v-loading="loading">
      <div class="msg_top">
        <el-image
          class="detail_img"
          :src="FileImage[info.extendName]? FileImage[info.extendName]:require('@/assets/image_library/neticon.png')"
          fit="cover"
          v-if="info.fileType!=4&&info.fileType!=3&&info.isDir!=1"
        />
        <img src="@/assets/image_library/dirlarge.png" v-if="info.isDir==1" class="detail_img"/>
        <div v-if="info.fileType==3" class="videoContent">
          <video-review class="video_box" :videoSrc="info.url"></video-review>
        </div>
        <el-image
          class="detail_img"
          :src="info.url"
          fit="cover"
          v-if="info.fileType==4"
        />
        <!--          <el-image-->
        <!--            class="detail_img"-->
        <!--            :src="detailMsg.imgSrc"-->
        <!--            :style="`height:80px; width:80px`"-->
        <!--            fit="cover"-->
        <!--          />-->
        <div class="detail_title">
          {{ info.fileName }}
        </div>
      </div>
      <div class="msg_size">
        大小： {{ info.size }}
      </div>
      <div class="msg_size">
        创建人： {{ info.nickName }}
      </div>
      <div class="msg_size">
        创建时间： {{ info.createTime | fifterTime }}
      </div>
      <div class="msg_size">
        修改时间： {{ info.updateTime || info.createTime | fifterTime }}
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { Filedetail } from '@/api/library_index'
import { getGroupFiledetail } from '@/api/library_groupList/groupList'
import videoReview from '@/views/library_homePage/component/videoReview.vue'
import { convertBytes } from '@/views/library_homePage/utils/files'

export default {
  name: 'detailMsg',
  components: { videoReview },
  // 过滤时间
  filters: {
    fifterTime(value) {
      if (!value) return ''
      const time = new Date(value)
      const newDate = new Date(
        time.getFullYear(),
        time.getMonth(),
        time.getDate(), // 减一天
        time.getHours() + 8,
        time.getMinutes(),
        time.getSeconds()
      )
      return newDate.toISOString().replace('T', ' ').slice(0, 19).replace('T', ' ')
    }

  },
  data() {
    return {
      isshow: false,
      detailMsg: '',
      info: {},
      map: '',
      FileImage: {
        'pdf': require('@/assets/image_library/pdficon.png'),
        'docx': require('@/assets/image_library/wordIcon.png'),
        'dov': require('@/assets/image_library/wordIcon.png'),
        'xls': require('@/assets/image_library/excelicon.png'),
        'xlsx': require('@/assets/image_library/excelicon.png'),
        'ppt': require('@/assets/image_library/ppticon.png'),
        'pptx': require('@/assets/image_library/ppticon.png'),
        'txt': require('@/assets/image_library/texticon.png'),
        'zip': require('@/assets/image_library/zipicon.png'),
        'rar': require('@/assets/image_library/zipicon.png'),
        'mp3': require('@/assets/image_library/musicicon.png')
      },
      loading: true,
      convertBytes: function(num) {
        return convertBytes(num)
      }
    }
  },
  methods: {
    show(item, map) {
      this.map = map
      this.detailMsg = item
      if (this.map === 'group') {
        this.getGroupFileMsg(item.id)
      } else {
        this.getFileMsg(item.id)
      }

      this.isshow = true
    },
    handleClose() {
      this.isshow = false
    },
    async getFileMsg(id) {
      this.loading = true
      let res = await Filedetail(id)
      if (res.code == 200) {
        this.info = res.data
        this.info.size = this.info.size ? this.convertBytes(this.info.size) : '0KB'
      }
      this.loading = false
    }
    ,
// 获取群文件详情
    async getGroupFileMsg(id) {
      this.loading = true
      let res = await getGroupFiledetail(id)
      if (res.code == 200) {
        this.info = res.data
        this.info.size = this.info.size ? this.convertBytes(this.info.size) : '0KB'
      }
      this.loading = false
    }
  }
}

</script>
<style scoped lang="scss">
.msgContent {
  padding: 10px 0;

  .msg_top {
    display: flex;
    align-items: center;

    .detail_img {
      width: 80px;
      height: 80px;
      margin-right: 20px;
    }

    .detail_title {
      font-size: 16px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3; /* 设置显示的行数 */
      overflow: hidden;
      text-overflow: ellipsis; /* 显示省略号 */
      white-space: normal; /* 允许换行 */
    }

    .videoContent {
      height: 50px;
      width: 50px;
      margin-right: 20px;
    }

    .video_box {
      width: 50px;
      height: 50px;
      margin-right: 20px;
    }
  }

  .msg_size {
    font-size: 14px;
    margin-top: 20px;
  }
}
</style>
